<!--
 * @Author: licongwei
 * @Date: 2022-03-08 10:24:34
 * @FileDescription: 模块容器
-->
<template>
  <div v-if="visible" :class="['com-dialog', visible ? '' : '']">
    <div class="top">
      <div class="time">
        <el-date-picker
          v-model="dateState.year"
          type="year"
          placeholder=""
          value-format="YYYY"
          format="YYYY年"
          @change="handChangeYear"
        />
      </div>
      <div class="title">{{ dateState.year }}新疆发电、用电总体情况</div>
    </div>
    <div class="center">
      <div class="left-box box">
        <left-top
          class="left-top"
          ref="leftTopRef"
          :date="dateState.year"
        ></left-top>
        <left-lower class="left-lower" ref="leftLowRef"></left-lower>
      </div>
      <div class="right-box box">
        <right-top
          class="right-top"
          ref="rightTopRef"
          :date="dateState.year"
        ></right-top>
        <right-lower
          class="right-lower"
          ref="rightLowRef"
          :date="dateState.year"
        ></right-lower>
      </div>
    </div>
    <div class="bottom">
      <div class="btn" @click="handBtnClose">关闭</div>
      <div class="bottom-title">
        六大耗能行业：化学原料及化学制品制造业、非金属矿物制品业、黑色金属冶炼及压延加工业、有色金属冶炼及压延加工业、石油加工炼焦及核燃料加工业、电力热力的生产和供应业。
      </div>
    </div>
    <!-- <div class="bg-con">
      <div class="bg-t"></div>
      <div class="bg-c"></div>
      <div class="bg-b"></div>
    </div> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import leftTop from './components/leftTop.vue'
import leftLower from './components/leftLower.vue'
import rightTop from './components/rightTop.vue'
import rightLower from './components/rightLower.vue'
import { setYear, getYear } from '@/utils/auth'
export default defineComponent({
  name: 'comDialog',
  components: {
    leftTop,
    leftLower,
    rightLower,
    rightTop
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, ctx) {
    const dateState: any = reactive({
      year: '2023'
    })
    const handCDate = () => {
      if (getYear()) {
        dateState.year = getYear()
      } else {
        var currentDate = new Date()
        var currentYear = currentDate.getFullYear()
        var previousYear = currentYear - 1
        dateState.year = previousYear + ''
        setYear(dateState.year)
      }
    }
    const rightTopRef = ref()
    const rightLowRef = ref()
    const handClick = () => {
      ctx.emit('imgClick')
    }
    const handBtnClose = () => {
      ctx.emit('handBtnClose')
    }
    const handChangeYear = () => {
      setYear(dateState.year)
      rightTopRef.value?.refreshData()
      rightLowRef.value?.refreshData()
    }
    watch(
      () => props.visible,
      (newVal) => {
        handCDate()
      }
    )
    return {
      handClick,
      handBtnClose,
      dateState,
      handChangeYear,
      handCDate,
      rightTopRef,
      rightLowRef
    }
  }
})
</script>
<style lang="less" scoped>
.com-dialog {
  position: absolute;
  height: 967px;
  width: 1464px;
  overflow: hidden;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/bg.png);
  background-size: 100% 100%;
  padding: 15px 40px 15px;
  z-index: 1000 !important;
  display: flex;
  flex-direction: column;

  .top {
    position: relative;
    height: 55px;
    line-height: 55px;
    .time {
      position: absolute;
      ::v-deep(.el-input .el-input__inner) {
        border-radius: 10px;
      }
      ::v-deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
        width: 141px;
        height: 37px;
      }
      ::v-deep(.el-icon) {
        color: rgb(1, 251, 244);
        margin-top: -4px;
      }
      ::v-deep(.el-input) {
        font-size: 18px;
        --el-input-border-radius: 5px;
        --el-input-hover-border: rgb(1, 251, 244);
        --el-input-text-color: rgb(1, 251, 244);
        --el-input-hover-border-color: rgb(1, 251, 244);
        --el-input-placeholder-color: rgba(1, 251, 244, 0.6);
        --el-input-clear-hover-color: rgb(1, 251, 244);
        .el-input__inner {
          padding-left: 42px;
          border: 1px solid rgba(1, 251, 244, 0.502);
        }
        ::placeholder {
          font-size: 14px;
        }
      }
    }
    .title {
      font-size: 26px;
      font-family: 'AliHYAiHei';
      color: rgb(222, 241, 255);
      text-align: center;
    }
  }
  .center {
    height: calc(100% - 110px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .left-box {
      width: 570px;
      height: 100%;
      .left-top,
      .left-lower {
        height: 396px;
      }
    }
    .right-box {
      width: 805px;
      height: 100%;
      .right-top,
      .right-lower {
        height: 396px;
      }
    }
  }
  .bottom {
    height: 55px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    flex-direction: column;
    .btn {
      width: 112px;
      height: 48px;
      border-radius: 10px;
      background-color: rgb(0, 102, 255);
      font-size: 22px;
      font-family: 'Microsoft YaHei';
      color: rgb(222, 241, 255);
      text-align: center;
      line-height: 48px;
      cursor: pointer;
    }
    .bottom-title {
      position: absolute;
      color: rgb(1, 251, 245);
      width: 660px;
      left: 55%;
    }
  }
}
.mask {
  z-index: 98;
  background-color: #000;
  // position: fixed;
  filter: alpha(opacity=80); /*支持 IE 浏览器*/
  -moz-opacity: 0.8; /*支持 FireFox 浏览器*/
  opacity: 0.8; /*支持 Chrome, Opera, Safari 等浏览器*/
}
</style>
